<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/normalize.css">
    <title>Document</title>
</head>
<style>
   .topContainer {
       background-color: #fff;
       font-size: 14px;
       color: #343434;
       overflow: hidden;
       width: 100;
   }
    .topContainer--center {
        margin: 0 auto;
    }
    .topContainer--avator {
        background-color: #da626c;
        margin-top: 80px;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        overflow: hidden;
        
    }
    .topContainer--avator img {
        width: 100%;
    }
    .topContainer__tips--login {
        text-align: center;
        margin-top: 5px;

    }
    .topContainer__tips--discount {
        margin-top: 5px;
        text-align: center;
        font-size: 12px;
        color: #da626c;
    }
    .bodyContainer {
        margin-top: 10px;
        background-color: #f5f5f5;
    }
    .bodyContainer__option {
        overflow: hidden;
        width: 100%;
        background-color: #fff;
        /* height: 60px; */
        /* line-height: 60px; */
    }    
    .bodyContainer__icon--top {
        color: #fec230;
        float: left;
        margin: 23px 10px 23px 10px;
    } 
    .bodyContainer__option--name {
        color: #303030;
        float: left;
        margin: 23px 0 23px 0;
    }
    .bodyContainer__icon--bottom {
        float: right;
        margin: 23px 10px 23px 0;
        color: #c0c0c2;
    }
    .bodyContainer__option + .bodyContainer__option {
        margin-top: 2px;
    }
</style>

<body>
    <div style="background-color: #f5f5f5">
        <div class="topContainer">
            <div class="topContainer--avator topContainer--center">
                <img src="imgs/avator.jpeg" alt="" srcset="">
            </div>
            <div class="topContainer__tips--login topContainer--center">
                登录/注册
            </div>
            <div class="topContainer__tips--discount topContainer--center">
                注册领30元新人券
            </div>
        </div>

        <div class="bodyContainer">
            <div class="bodyContainer__option">
                <div class="bodyContainer__icon--top">&#9745;</div>
                <div class="bodyContainer__option--name">已购</div>
                <div class="bodyContainer__icon--bottom">&#9758;</div>
            </div>
            <div class="bodyContainer__option">
                <div class="bodyContainer__icon--top">&#9745;</div>
                <div class="bodyContainer__option--name">已购</div>
                <div class="bodyContainer__icon--bottom">&#9758;</div>
            </div>
            <div class="bodyContainer__option">
                <div class="bodyContainer__icon--top">&#9745;</div>
                <div class="bodyContainer__option--name">已购</div>
                <div class="bodyContainer__icon--bottom">&#9758;</div>
            </div>
            <div class="bodyContainer__option">
                <div class="bodyContainer__icon--top">&#9745;</div>
                <div class="bodyContainer__option--name">已购</div>
                <div class="bodyContainer__icon--bottom">&#9758;</div>
            </div>
        </div>
    </div>
</body>

</html>
